
$(function() {
	// $.fx.off = true // 一件关闭动画
	
	$('.show').on("click", function() {
		$(".box").show("slow") // fast
	})
	
	$('.hide').on("click", function() {
		// $(".box").hide()
		$(".box").hide(3000, function() {
			console.log("done!")
		})
	})
	
	$('.toggle').on("click", function() {
		$(".box").toggle()
	})
	
	$('.slideDown').on("click", function() {
		$(".box").slideDown(1000, function() {
			console.log("done!")
		})
	})
	$('.slideUp').on("click", function() {
		$(".box").slideUp(2000)
	})
	$('.slideToggle').on("click", function() {
		$(".box").slideToggle()
	})
	
	$('.fadeIn').on("click", function() {
		$(".box").fadeIn()
	})
	$('.fadeOut').on("click", function() {
		$(".box").fadeOut()
	})
	$('.fadeToggle').on("click", function() {
		$(".box").fadeToggle()
	})
	$('.fadeTo').on("click", function() {
		$(".box").fadeTo(1000, .5)
	})
	
	
	
	
	// 选择器和动画很受欢迎
	$(".running").on("click", function() {
		
		/*
		$(".box").css({
			marginLeft: 500,
			background: "red", // #f00
		})
		
		$(".box").animate({
			marginLeft: 500,
			background: "#f00",
		}, 4000)*/
	})
	
})


/*
const running = document.querySelector(".running")
const box = document.querySelector(".box")

// 没有CSS3动画、过渡，只能用js写动画
running.addEventListener("click", function() {
	// console.log(box)
	// 0 -> 500
	let ml = 0
	let timer = setInterval(function() {
		ml += 3
		if (ml >= 500) {
			clearInterval(timer)
		}
		box.style.marginLeft = ml + "px"
	}, 5)
})*/

